import Driver from "driver.js";
import 'driver.js/dist/driver.min.css';

export default function() {
  const driver = new Driver({
    padding: 0,
    opacity: 0.75,
    stageBackground: 'rgba(255,255,255, 0.8)',
    doneBtnText: '结束',
    nextBtnText: "下一步",
    prevBtnText: "上一步",
    closeBtnText: "结束",
    onNext() {
      // 如果下一步是页面区
      if (this.popover.title == '导航菜单') {
        if (app.$refs.tabs.tabs.length == 0) {
          driver.preventMove();
          app.pushPage({
            path: '/calendar',
            onPageLoad() {
              driver.moveNext();
            }
          });
        }
      }
    }
  });

  driver.defineSteps([
    {
      element: '.el-header .header-right > .current-user-container',
      popover: {
        title: '更多操作',
        description: '鼠标移动到当前登录用户名上查看更多操作',
        position: 'left'
      }
    },
    {
      element: '#nav-menu-aside',
      popover: {
        title: '导航菜单',
        description: '使用导航菜单打开页面',
        position: 'right'
      }
    },
    {
      element: '.menu-fold-button',
      popover: {
        title: '导航菜单展开或收缩',
        description: '点击展开或收缩导航菜单',
        position: 'top'
      }
    },
    {
      element: '.home-main > div > .el-tabs > .el-tabs__content',
      popover: {
        title: '当前页面内容',
        description: '',
        position: 'top'
      }
    },
    {
      element: '.home-main > div > .el-tabs > .el-tabs__header',
      popover: {
        title: '标签页',
        description: '在一个标签页上右键弹出标签页操作菜单',
        position: 'bottom'
      }
    }
  ]);
  
  return driver;
}